.login_out {
  width: 100%;
  height: 100%;
  position: relative;
  background: url("src/assets/login/bg.png");
  background-size: 100% 100%;
  min-height: 655px;
  overflow-y: auto;
}
.forgetSty {
  float:right;
  cursor: pointer
}
.forgetSty:hover {
  color: #00A2FF;
  text-decoration-line: underline;
}
.login_title {
  height: 100%;
  width: 100%;
  padding: 8% 12% 4%;
}

.font-logo {
  font-size: 32px;
  font-family: fangzheng;
  color: #516470;
  letter-spacing: 3px;
}

.login-body {
  height: 100%;
  width: 100%;
  position: relative;
}

.login_form {
  position: absolute;
  width: 26.8%;
  height: 60%;
  min-height: 560px;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  background: #ffffff;
  box-shadow: 10px 10px 10px #c2d0db;
}

.login_form_border {
  margin: 0;
  border-bottom: 6px solid red;
  border-image: -webkit-linear-gradient(left, #3b6b82, #4fb9e9, #3b6b82) 30 6; /* Safari 5.1 - 6.0 */
  border-image: -o-linear-gradient(right, #3b6b82, #4fb9e9, #3b6b82) 30 6; /* Opera 11.1 - 12.0 */
  border-image: -moz-linear-gradient(right, #3b6b82, #4fb9e9, #3b6b82) 30 6; /* Firefox 3.6 - 15 */
  border-image: linear-gradient(to right, #3b6b82, #4fb9e9, #3b6b82) 30 6; /* 标准的语法（必须放在最后） */
}

.login_form_top b {
  vertical-align: middle;
  letter-space: 4px;
  padding: 0 15px;
}

.ant-input {
  height: 30px;
  border: 0;
  border-bottom: 1px solid #248ee2;
  border-radius: 0;
}
.ant-input:focus{
  border: 0;
  border-bottom: 1px solid #248ee2;
  box-shadow: none;
}
:host ::ng-deep .ant-form-item-label>label{
  color: #248ee2 !important;
}
:host ::ng-deep .ant-form-item{
  margin-bottom: 30px !important;
}
.verifyClass {
  width: 20%;
  margin-left: 10px;
  display: inline-block;
  border: 1px solid #fff;
  height: 30px;
  float: left;
  margin-top: 5px;
  border-radius: 3px;
  cursor: pointer;
  line-height: 1.5;
}

.verifyClass img {
  width: 100%;
  height: 100%;
}

.login-button {
  border-radius: 20px;
  outline: none;
  border: 1px solid #248ee2;
  box-shadow: 2px 2px 2px #aaa;
  padding: 1% 16%;
  color: #ffffff;
  background: #248ee2;
  cursor: pointer;
}

.login-button:hover {
  //background: #f6f6f6;
}

.login_form_top {
  height: 35%;
  font-size: 26px;
  letter-spacing: 3px;
}

.login_button_div {
  text-align: center;
  position: absolute;
  bottom: 6%;
  left: 0;
  right: 0;
}

/****modal 高**/
@media screen and (min-width: 1920px){

  .loginDwonDiv {
    padding-top: 4%;
  }
  .login_title {
    padding: 6% 12%;
  }
}

@media screen and (max-width: 1920px){

  .loginDwonDiv {
    padding-top: 0;
  }
  .login_title {
    padding: 6% 12%;
  }

}

@media screen and (max-width: 1680px) {

  .loginDwonDiv {
    padding-top: 0%;
  }

  .login_title {
    padding: 6% 12%;
  }

}

@media screen and (max-width: 1440px) {

  .loginDwonDiv {
    padding-top: 0;
  }
}

@media screen and (max-width: 1366px) {

  .loginDwonDiv {
    padding-top: 0%;
  }
}
.bg-login{
  width: 100%;
  height: 100%;
  background: none;
  background: rgba(0, 0, 0, .3);
  position: relative;
  .tips{
    position: absolute;
    margin-left: -90px;
    top: calc(35% + 64px);
    left: 50%;
    font-size: 30px;
    color: #fff;
  }
}
.sword {
  position: relative;
  width: 64px;
  height: 64px;
  top: 35%;
  left: 50%;
  margin-left: -32px;
  border-radius: 50%;
}
.sword span{
  position: absolute;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.sword :first-child{
  left: 0%;
  top: 0%;
  border-bottom: 3px solid #EFEFFA;
  animation: sword-one 1s linear infinite;
}
.sword :nth-child(2){
  right: 0%;
  top: 0%;
  animation: sword-two 1s linear infinite;
  border-right: 3px solid #EFEFFA;
}

.sword :last-child{
  right: 0%;
  bottom: 0%;
  animation: sword-three 1s linear infinite;
  border-top: 3px solid #EFEFFA;
}
@keyframes sword-one {
  0% {
    transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
  }
}
@keyframes sword-two {
  0% {
    transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
  }
}

@keyframes sword-three {
  0% {
    transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
  }
}
